<template>
	<view class="p-30">
		<u-form labelWidth="150rpx" labelPosition="top" :model="form" :rules="rules" ref="uForm" errorType="toast">
			<view class="card p-30">
				<u-form-item label="姓名" prop="name" borderBottom>
					<u-input v-model="form.name" placeholder="请输入真实姓名" border="none"></u-input>
				</u-form-item>
				<u-form-item label="账号" prop="account" borderBottom>
					<u-input v-model="form.account" placeholder="请输入账号" border="none"></u-input>
				</u-form-item>
				<u-form-item label="收款方式" prop="type" borderBottom @click="actionShow = true; hideKeyboard()">
					<u-input disabled :disabledColor="disabledColor" v-model="type" placeholder="请选择收款方式"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="收款码" prop="image" borderBottom>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" width="300rpx" height="200rpx"></u-upload>
				</u-form-item>
			</view>
		</u-form>

		<view class="mt-30">
			<u-button @click="submit" type="primary" :loading="loading" text="提交信息" shape="circle"></u-button>
		</view>

		<u-action-sheet :show="actionShow" :actions="actions" title="请选择收款方式" @close="actionShow = false"
			@select="actionSelect">
		</u-action-sheet>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getCardType,
		submitCard
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				actionShow: false,
				actions: [],
				disabledColor: '#fff',
				loading: false,
				fileList1: [],
				type: "",
				form: {
					name: "",
					account: "",
					image: "",
					type: "",
				},
				rules: {
					name: {
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					account: {
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					type: {
						required: true,
						message: '请选择支付方式',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		computed: {
			...mapState([]),
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad() {
			this.initData();
		},
		methods: {
			initData() {
				getCardType().then(res => {
					console.log(res);
					this.actions = res
				})
			},
			submit() {
				let vm = this;
				if (vm.fileList1.length == 0) {
					vm.$u.toast('请上传收款码');
					return false;
				}
				if (vm.fileList1.length != 0) {
					vm.form.image = vm.fileList1[0].url;
				}
				vm.loading = true;
				this.$refs.uForm.validate().then(res => {
					submitCard(this.form).then(res => {
						vm.$refs.uToast.show({
							type: 'success',
							message: res.msg,
							complete() {
								vm.loading = false;
								uni.redirectTo({
									url: '/pages/mine/person/list/list'
								})
							}
						})
					}).catch(err => {
						vm.loading = false;
					})

				}).catch(errors => {
					vm.loading = false;
				})
			},
			actionSelect(e) {
				this.type = e.name
				this.form.type = e.value
			},
		},
	}
</script>

<style lang="scss" scoped>
</style>